<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<style media="screen">
		    *{
		        margin: 0;
		        padding: 0;
		    }
		    html,body{
		        width: 100%;
		        height: 100%;
		    }
		    body{
		        background-color: #e9e6e6;
		    }
		    .btn{
		        position: absolute;
		        left: 50%;
		        bottom: 10%;
		        width: 100px;
		        height: 40px;
		        text-align: center;
		        line-height: 40px;
		        color: #0e6cc3;
		        border:2px solid #0e6cc3;
		        border-radius: 8px;
		        margin-left: -50px;
		    }
		    .origin, .result{
		        width: 48%;
		        display: inline-block;
		        vertical-align: top;
		        text-align: center;
		        position: relative;
		    }
		    .title{
		        font-size: 20px;
		        color: #0e6cc3;
		        line-height: 30px;
		        text-align: center;
		        padding: 10px;
		    }
		    .image{
		        /* width: 320px; */
		    }
		</style>
	</head>
	<body>
		<div class="origin">
		    <h1 class="title">妆容结果图</h1>
		    <img class="image" src="./demo.jpg" alt="" id="origin">
		</div>
		<div class="result" id="result">
		    <h1 class="title">抠除后的图</h1>
		</div>
		<div>
			<canvas id="canvas" width="640" height="640" style="border:1px solid #000000; margin: 70px;"></canvas>
		</div>
	</body>
	<script src="./dist/numjs.min.js"></script>
	<script type="module">
		// 蒙层的算法
		import { data_bg } from './data.js';
		
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");

		var array = data_bg[0].images;
		const pic_width = 320;
		const pic_height = 320;
		
		let origin = document.getElementById('origin');
		ctx.drawImage(origin, 0, 0, pic_width, pic_height);
		let originData = ctx.getImageData(0, 0, pic_width, pic_height);
		
		for (let i = 3, len = originData.data.length; i < len; i += 4) {
			originData.data[i] = array[parseInt(((i - 3) / 4) / 320)][((i - 3) / 4) % 320][2];
		}
		ctx.putImageData(originData, 320, 0);
	</script>
</html>
